<template>
  <div class="demo">
    
    <!-- assets下的资源会被压缩，可以通过相对路径获取 -->
    <!-- static下的资源不会被压缩，只能通过绝对路径获取 -->
    <img src="~assets/img/5.png" alt="" />
    <img src="../../assets/img/5.png" alt="" />
    <img src="~static/img/4.png" alt="" />
    <img src="/img/4.png" alt="" />
    <div class="img_bck1"></div>
    <div class="img_bck2"></div>
    <div class="img_bck3"></div>
    <div class="img_bck4"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  components: {},
};
</script>

<style lang='less' scoped>
    .img_bck1{
        height: 100px;
        background-image: url(../../assets/img/5.png);
        background-repeat: no-repeat;
    }
    .img_bck2{
        height: 100px;
        background-image: url(/img/4.png);
        background-repeat: no-repeat;
    }

    .img_bck3{
        height: 100px;
        background-image: url(~assets/img/5.png);
        background-repeat: no-repeat;
    }
    .img_bck4{
        height: 100px;
        background-image: url(~static/img/4.png);
        background-repeat: no-repeat;
    }
</style>
